<script setup lang="ts">
defineOptions({
  // eslint-disable-next-line vue/no-reserved-component-names
  name: "Structure",
  inheritAttrs: false,
});

import {
  departmentStructure,
} from "@/api/department";

const style = ref(
  {
    background: "#fff",
    color: "#5e6d82",
    width:"100px"

  })
const data = ref({})
const props = ref({ id: 'id', pid: 'pid', label: 'name', children: 'children' })

const isshow = ref(false)
onMounted(() => {
  departmentStructure()
    .then((res) => {
      data.value = res.data[0]
      isshow.value = true
      console.log(data.value);

    })

  // 图表初始化

});
</script>

<template>
  <div class="app-container" style="height: 1000px;">
    <vue3-tree-org :data="data" center :horizontal="false" :collapsable="false" :label-style="style" :props="props" :center="true"  v-if="isshow"/>

  </div>
</template>
